<template>
    <el-date-picker
        v-model="localValue"
        value-format="yyyy-MM-dd"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="dateChange"
    />
</template>

<script>
import moment from 'moment'

export default {
    name: 'DatePickForm',
    props: {
        defaultValue: {
            type: Array,
            default() {
                return null
            }
        }
    },
    data() {
        return {
            localValue: '',
            pickerOptions: {
                shortcuts: [
                    {
                        text: '去年',
                        onClick(picker) {
                            const start = new Date(new Date().getFullYear() - 1, 0)
                            const end = new Date(new Date().getFullYear() - 1, 12, 0)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date(new Date().getFullYear(), 0)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '本月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            const startNew = new Date(start.getFullYear(), start.getMonth(), 1)
                            picker.$emit('pick', [startNew, end])
                        }
                    },
                    {
                        text: '上月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            const startNew = new Date(start.getFullYear(), start.getMonth() - 1, 1)
                            const endNew = new Date(end.getFullYear(), end.getMonth(), 0)
                            picker.$emit('pick', [startNew, endNew])
                        }
                    },
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const start = new Date()
                            const end = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24)
                            end.setTime(end.getTime())
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '前天',
                        onClick(picker) {
                            const start = new Date()
                            const end = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
                            end.setTime(end.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', [start, end])
                        }
                    }
                ]
            }
        }
    },
    created() {
        if (this.defaultValue) {
            this.localValue = this.defaultValue
            this.dateChange(this.localValue)
        }
    },
    methods: {
        dateChange(val) {
            if (val) {
                val[0] = moment(val[0]).format('YYYY-MM-DD')
                val[1] = moment(val[1]).format('YYYY-MM-DD')
            }
            this.$emit("input", val)
            this.$emit('date-change', val)
        }
    }
}
</script>

<style></style>
